import 'package:dio/dio.dart';
import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:flutter_nfmovies/net/dio_util.dart';
import 'package:flutter_nfmovies/page/player_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:html/dom.dart' as dom;
import 'package:html/parser.dart';

class MFOldVideoInfoPage extends StatelessWidget {
  final dom.Element element;
  final String hero;
  final String title;

  const MFOldVideoInfoPage({Key key, this.element, this.hero, this.title})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final String nfUrl = 'https://www.nfmovies.com';
    var thumb = element
        ?.querySelector('div.myui-content__thumb')
        ?.querySelector('img.lazyload')
        ?.attributes['data-original'];
    // var videoList = content.getElementsByClassName('classNames');
    // var title = element
    //     ?.querySelector('div.myui-content__detail')
    //     ?.querySelector('h1')
    //     ?.text;
    return Scaffold(
        body: CustomScrollView(
      slivers: [
        SliverAppBar(
          expandedHeight: 200.h,
          title: Text('$title'),
          flexibleSpace: Hero(
            tag: '$hero',
            child: Image.network(
              '$nfUrl$thumb',
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverGrid(
            delegate: SliverChildListDelegate.fixed(List.generate(
                element
                        .querySelector(
                            'ul.myui-content__list.sort-list.clearfix')
                        ?.querySelectorAll('a')
                        ?.length ??
                    0, (index) {
              var items = element
                  .querySelector('ul.myui-content__list.sort-list.clearfix')
                  ?.querySelectorAll('a');

              return Container(
                child: ElevatedButton(
                    onPressed: () {
                      DioUtil.instance.get<String>(
                          '$nfUrl${items[index].attributes['href']}',
                          (response) {
                        debugPrint(response);
                        var h = parse(response).body.outerHtml;
                        var playUrl =
                            RegExp(r'now=unescape\("(.*?)"\)', multiLine: true)
                                .allMatches(h)
                                .map((e) {
                          var group = e.group(0);
                          return group;
                        });
                        debugPrint('playUrl: $playUrl');
                        if (TextUtil.isEmpty(playUrl.first)) {
                          return;
                        }
                        Navigator.push(context, MaterialPageRoute(builder: (_) {
                          var url = playUrl.first
                              .replaceAll(r'now=unescape("', '')
                              .replaceAll('")', '');
                          debugPrint('url: $url');
                          return PlayerPage(
                            playUrl: '$url',
                          );
                        }));
                      }, (code, message) => null);
                    },
                    child: Text(items[index].text)),
              );
            })),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                childAspectRatio: 60 / 37,
                crossAxisSpacing: 20.w,
                mainAxisSpacing: 20.h)),
        // SliverList(
        //     delegate: SliverChildListDelegate(List.generate(
        //         element.querySelectorAll('div.myui-content__detail').length,
        //         (index) => Html(
        //               data: element
        //                   .querySelectorAll('div.myui-content__detail')[index]
        //                   .outerHtml,
        //               onImageError: (exception, stackTrace) {},
        //               customRender: {
        //                 "div": (_, child, attributes, element) {
        //                   if (attributes['id'] == 'rating') {
        //                     return Text.rich(
        //                       TextSpan(
        //                           text:
        //                               '${element.querySelector('span.left.text-muted')?.text}',
        //                           children: [
        //                             TextSpan(
        //                                 text:
        //                                     '${element.querySelector('span.branch')?.text}')
        //                           ]),
        //                     );
        //                   } else if (attributes['class'] ==
        //                       'operate clearfix') {
        //                     return SizedBox();
        //                   } else {
        //                     return child;
        //                   }
        //                 },
        //                 "p": (_, child, attributes, element) {
        //                   return Text('${element.text}');
        //                 },
        //                 "a": (_, child, attributes, element) {
        //                   if (attributes['class'] == 'details') {
        //                     return SizedBox();
        //                   }
        //                   return child;
        //                 },
        //                 "img": (_, child, attributes, element) {
        //                   if (!(attributes['src']?.startsWith('http') ??
        //                       true)) {
        //                     return SizedBox();
        //                   }
        //                   return child;
        //                 }
        //               },
        //               blacklistedElements: ["div.operate clearfix"],
        //             ))))
      ],
    ));
  }
}
